<template>

  <div>
    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="单词组名称">
          <el-input placeholder="请输入内容" v-model.trim="searchWordGroupParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getWordGroupListPageBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryWordGroup">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveWordGroup">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <el-card style="margin-top: 10px">

      <el-table
        :data="wordGroupTable.data"
        max-height="620px"
        height="620px"
        style="width: 100%">

        <el-table-column
          prop="name"
          label="单词组名称"
        >
        </el-table-column>

        <el-table-column
          prop="details"
          label="详情"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button @click="openWordTips(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看单词</el-button>
            <el-button @click="openUpdWordGroup(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delWordGroupTips(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; "
        background
        layout="total, prev, pager, next, jumper"
        @current-change="wordGroupPageCurrentChange"
        :page-size="wordGroupTable.size"
        :current-page="wordGroupTable.current"
        :pager-count="5"
        :total="wordGroupTable.total">
      </el-pagination>

    </el-card>

    <WordList ref="wordListRef"/>
    <WordGroupSaveUpd ref="wordGroupSaveUpdRef" @getWordGroupListPage="getWordGroupListPage"/>
  </div>

</template>

<script>

  import http from '@/utils/http'
  import WordGroupSaveUpd from './WordGroupSaveUpd.vue'
  import WordList from './WordList.vue'

  export default {
    name: "WordGroupList",
    components: {
      WordGroupSaveUpd,
      WordList,
    },
    data(){
      return {
        // 查询参数
        searchWordGroupParam: {
          name: null,
        },
        // 表格
        wordGroupTable: {
          // 表格数据
          data: [],
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    methods: {
      /**
       * 打开单词弹出框
       * @param row
       */
      openWordTips(row){
        this.$refs.wordListRef.openBeforeWordPage(row.id)
      },
      /**
       * 弹出修改弹窗
       */
      openUpdWordGroup(row){
        this.$refs.wordGroupSaveUpdRef.openBeforeWordGroupPage('upd', row)
      },
      /**
       * 打开新增
       */
      openSaveWordGroup(){
        this.$refs.wordGroupSaveUpdRef.openBeforeWordGroupPage('save', null)
      },
      /**
       * 根据ID删除单词组
       * @param row 当前行数据
       */
      delWordGroupTips(row){
        this.$confirm('是否删除单词组, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delWordGroup(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除单词组
       * @param row 当前行数据
       */
      delWordGroup(row){
        http.post("/word/delWordGroup", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getWordGroupListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      wordGroupPageCurrentChange(value){
        this.wordGroupTable.current = value
        this.getWordGroupListPage()
      },
      /**
       * 重置查询
       */
      resetQueryWordGroup(){
        this.searchWordGroupParam = {
          name: null,
        }
      },
      /**
       * 查询之前的操作
       */
      getWordGroupListPageBefore(){
        this.wordGroupTable.current = 1
        this.getWordGroupListPage()
      },
      /**
       * 分页查询单词组
       */
      getWordGroupListPage(){
        this.searchWordGroupParam.current = this.wordGroupTable.current
        this.searchWordGroupParam.size = this.wordGroupTable.size
        http.post("/word/getWordGroupListPage", this.searchWordGroupParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.wordGroupTable.total = data.total;
          this.wordGroupTable.current = data.current;
          this.wordGroupTable.size = data.size;
          // 处理数据
          this.wordGroupTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getWordGroupListPage()
    },
  }
</script>

<style scoped>

</style>
